<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>margin</title>
	<style type="text/css">
		#out{
			/*position: absolute;
			top: 0;left: 0;right: 0;bottom: 0;
			margin: auto;
			border: 1px solid black;
			height: 500px;
			width: 600px;*/
			width: 400px;
			height: 300px;
			/*border: 1px solid black;*/
			margin: 10px auto;
			/*text-align: center;*/
			background-color: black;
				display: inline-block;
		}
		#inner{
			/*position: relative;
			top: 50%;
    		transform:translateY(-50%);
    		left: 50%;
    		transform:translateX(-50%);*/
    		/*border: 1px solid black;*/
			height: 100px;
			/*width: 200px;*/
			margin:30px auto;

			/*background-color: black;*/
/*			position: absolute;
			top: 0;left: 0;right: 0;bottom: 0;
			margin: auto;*/
			width: 100px;
			display: inline-block;
			background-color: red;
			/*border:1px solid black;*/
		}
	</style>
</head>
<body>
	<div id="out">
		<div id="inner">1111111111333333333333333111</div>		
	</div>

</body>
</html>